<style include="cr-shared-style shimless-rma-shared shimless-fonts">
  .input-row {
    margin-bottom: 30px;
  }

  .input-holder {
    align-items: center;
    display: flex;
  }

  cr-button {
    border: 0;
    margin-top: auto;
  }

  .sku-warning {
    color: var(--shimless-warning-text-color);
    display: flex;
    font-family: var(--shimless-warning-font-family);
    font-size: var(--shimless-warning-font-size);
    font-weight: var(--shimless-regular-font-weight);
    line-height: var(--shimless-warning-line-height);
    max-width: 400px;
  }

  cr-input {
    --cr-input-error-display: none;
    --cr-form-field-label-color: var(--shimless-hint-text-color);
    margin-inline-end: 20px;
  }

  select {
    margin-inline-end: 20px;
  }

  .cr-form-field-label {
    color: var(--shimless-hint-text-color);
    font-family: var(--shimless-hint-font-family);
    font-size: var(--shimless-hint-font-size);
    font-weight: var(--shimless-medium-font-weight);
    line-height: var(--shimless-hint-line-height);
  }

  cr-input,
  .md-select {
    width: 336px;
  }
  
  #skuIconContainer {
    align-items: center;
    display: inline-flex;
    vertical-align: middle;
  }

  #infoIcon {
    display: inline-block;
    height: 18px;
    margin-inline-start: 6px;
    width: 18px;
  }

  #tooltipContent {
    line-height: var(--shimless-instructions-line-height);
  }
</style>

<base-page>
  <div slot="left-pane">
    <h1 tabindex="-1">[[i18n('confirmDeviceInfoTitle')]]</h1>
    <div class="instructions">
      [[i18n('confirmDeviceInfoInstructions')]]
    </div>
  </div>
  <div slot="right-pane">
    <div class="input-wrapper">
      <div class="input-row">
        <div class="input-holder">
          <cr-input id="serialNumber" value="{{serialNumber_}}" 
              label="[[i18n('confirmDeviceInfoSerialNumberLabel')]]"
              disabled="[[allButtonsDisabled]]">
          </cr-input>
          <cr-button id="resetSerialNumber"
              on-click="onResetSerialNumberButtonClicked_"
              disabled="[[disableResetSerialNumber_]]"
              aria-description="[[i18n('confirmDeviceInfoSerialNumberLabel')]]">
            [[i18n('confirmDeviceInfoResetButtonLabel')]]
          </cr-button>
        </div>
      </div>
      <div class="input-row">
        <div class="input-holder">
          <cr-input id="dramPartNumber" value="{{dramPartNumber_}}"
              label="[[i18n('confirmDeviceInfoDramPartNumberLabel')]]"
              disabled="[[allButtonsDisabled]]">
          </cr-input>
          <cr-button id="resetDramPartNumber"
              on-click="onResetDramPartNumberButtonClicked_"
              disabled="[[disableResetDramPartNumber_]]"
              aria-description="[[i18n('confirmDeviceInfoDramPartNumberLabel')]]">
            [[i18n('confirmDeviceInfoResetButtonLabel')]]
          </cr-button>
        </div>
      </div>
      <div class="input-row">
        <label id="regionLabel" class="cr-form-field-label">
          [[i18n('confirmDeviceInfoRegionLabel')]]
        </label>
        <div class="input-holder">
          <select id="regionSelect" class="md-select"
              on-change="onSelectedRegionChange_" aria-labelledby="regionLabel"
              disabled="[[allButtonsDisabled]]">
            <template is="dom-repeat" items="[[regions_]]" as="region">
              <option value="[[region]]">
                [[region]]
              </option>
            </template>
          </select>
          <cr-button id="resetRegion" on-click="onResetRegionButtonClicked_"
              disabled="[[disableResetRegion_]]"
              aria-describedby="regionLabel">
            [[i18n('confirmDeviceInfoResetButtonLabel')]]
          </cr-button>
        </div>
      </div>
      <div class="input-row">
        <label id="whiteLabelLabel" class="cr-form-field-label">
          [[i18n('confirmDeviceInfoWhiteLabelLabel')]]
        </label>
        <div class="input-holder">
          <select id="whiteLabelSelect" class="md-select"
              on-change="onSelectedWhiteLabelChange_"
              aria-labelledby="whiteLabelLabel"
              disabled="[[allButtonsDisabled]]">
            <template is="dom-repeat" items="[[whiteLabels_]]" as="whiteLabel">
              <option value="[[whiteLabel]]">
                [[whiteLabel]]
              </option>
            </template>
          </select>
          <cr-button id="resetWhiteLabel"
              on-click="onResetWhiteLabelButtonClicked_"
              disabled="[[disableResetWhiteLabel_]]"
              aria-describedby="whiteLabelLabel">
            [[i18n('confirmDeviceInfoResetButtonLabel')]]
          </cr-button>
        </div>
      </div>
      <div id="skuIconContainer">
        <label id="skuLabel" class="cr-form-field-label">
          [[i18n('confirmDeviceInfoSkuLabel')]]
        </label>
        <iron-icon icon="shimless-icon:info" id="infoIcon"
            class="cr-form-field-label">
        </iron-icon>
        <paper-tooltip for="infoIcon" aria-hidden="true">
          <div id="tooltipContent">[[i18n('confirmDeviceInfoSkuWarning')]]</div>
        </paper-tooltip>
      </div>
      <div class="input-holder">
        <select id="skuSelect" class="md-select"
            on-change="onSelectedSkuChange_" aria-labelledby="skuLabel"
            disabled="[[allButtonsDisabled]]">
          <template is="dom-repeat" items="[[skus_]]" as="sku">
            <option value="[[sku]]">
              [[sku]]
            </option>
          </template>
        </select>
        <cr-button id="resetSku" on-click="onResetSkuButtonClicked_"
            disabled="[[disableResetSku_]]"
            aria-describedby="skuLabel">
          [[i18n('confirmDeviceInfoResetButtonLabel')]]
        </cr-button>
      </div>
    </div>
  </div>
</base-page>
